<template>
  <div class="recruit_box">
    <div class="report_header">

      <div class="report_top">

        <el-tag type="success" style="margin:10px 30px">人才库信息导出</el-tag>
        <el-form :inline="true" :model="dateTime" class="demo-form-inline" style="padding:0 20px;">

          <el-form-item label="审批人">
            <el-select v-model="dateTime.userName" placeholder="审批人">
              <el-option :label="obj.name" :value="obj.id" v-for="obj in userList" :key="obj.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期时间">
            <el-date-picker v-model="dateTime.date" type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00']"
                            value-format = "yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="exportBtn">导出人才库</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="margin-top:20px;height:200px">
        <el-tag type="success" style="margin:10px 30px">人才库信息导入</el-tag>

        <div class="href_personnel">
          <span>点击这里,获取上传模板信息!</span>
         <a href="./template.xlsx" download="模板" style="text-decoration: none;">人才库模板</a>
        </div>

        <el-upload class="upload-demo"
                   drag
                   action="http://localhost:9000/api/personnel/importExcel"
                   multiple
                   :on-success="handleSuccess"
                   style="margin-left: 60px">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">只能导入Excel文件<em>点击上传</em></div>
        </el-upload>

      </div>


    </div>

  </div>

</template>

<script>
import {getUser} from  '@/api/auth/login'

export default {
  data(){
    return{
      userList:[],
      dateTime:{
        userName:'',
        date:['','']
      }
    }
  },
  created() {
    this.selectUserList()
  },
  methods:{
    async exportBtn(){
      const url = "http://localhost:9000/api/report/personnel";
      window.location.href = url+'?reviewer='+this.dateTime.userName+'&startTime='+this.dateTime.date[0]+'&endTime='+this.dateTime.date[1]
    },
    async selectUserList(){
      const {data:res} =await getUser()
      this.userList = res.data.list
    },
    handleSuccess(response,file, fileList){
      if (response.code === 200){
        this.$message({
          message: response.message,
          type: 'success'
        });
      }else {
        this.$message.error(response.message);
      }

    }
  }
}
</script>

<style scoped>
.report_header{
  width:1900px;
  height: 850px;
}
.report_top{
  height:100px;
}
.href_personnel{
  margin-left:60px;
  font-size:20px;
}
</style>
